<template>
    <div class="examScores">
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/?type=1' }">科目{{ types == 1 ? '一' : '四' }}</el-breadcrumb-item>
                <el-breadcrumb-item>考试成绩</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="userExamInfo">
            <div class="leftInfo">
                <div class="avatar"><el-avatar :size="60" :src="userinfo.full_avatar"
                        style="vertical-align: middle;"></el-avatar>
                </div>
                <div class="maxScore" style="line-height: 60px;font-size: 28px;">最高成绩 {{ maxScore }} 分</div>
                <div class="resume" @click="resumeExam">继续考试</div>
            </div>
            <div class="rightInfo">
                <div class="item">
                    <div class="score" style="color: #2AC092;text-align: center;">{{ examCount }}<span>次</span>
                    </div>
                    <div class="title">考试次数</div>
                </div>
                <div class="item">
                    <div class="score" style="color: #FF6D6A;text-align: center;">
                        {{ averScore }}<span>分</span></div>
                    <div class="title">平均成绩</div>
                </div>
                <div class="item">
                    <div class="score" style="color: #2AC092; text-align: center;">
                        {{ predictScore }}<span>分</span></div>
                    <div class="title">成绩预测</div>
                </div>
            </div>
        </div>
        <div class="tables">
            <el-table :data="tableData" style="width: 100%" :header-cell-class-name="headerName">
                <el-table-column prop="subject" label="科目" />
                <el-table-column prop="scores" label="分数" />
                <el-table-column prop="updated_at" label="时间" />
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button round size="mini" @click="handleEdit(scope.$index, scope.row)">成绩记录</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getExamlist } from '@/api/index.js'
export default {
    name: 'ExamScores',
    data() {
        return {
            types: 1,
            circleUrl: '',
            maxScore:0,
            averScore:0,
            examCount:0,
            predictScore:0,
            tableData: [],
            headerName: 'headerName1',
            userinfo: {}
        }
    },
    mounted() {
        this.types = this.$route.query.type
        this.init()
        let ui = localStorage.getItem('userInfo')
        if (Object.keys(ui).length != 0) {
            this.userinfo = JSON.parse(ui)
        }
    },
    methods: {
        init() {
            let that = this
            getExamlist({ subject: this.types }).then(res => {
                console.log(res.data)
                that.tableData = res.data;
                // 计算考试次数,最高分数,平均成绩,预测成绩
                let sumScore = 0;// 计算总分数
                
                if (that.tableData.length != 0) {
                    let minScore = that.tableData[0].scores;//计算最小分数
                    that.tableData.map(item => {
                        if (item.subject == 1) {
                            item.subject = '科目一'
                        }
                        if (item.subject == 4) {
                            item.subject = '科目四'
                        }
                        // 获取最大分数
                        if (item.scores > that.maxScore) {
                            that.maxScore = item.scores;
                        }
                        // 获取最小分数
                        if (item.scores <= minScore) {
                            minScore = item.scores;
                        }
                        sumScore += item.scores;
                    })
                    // 考试次数
                    that.examCount = that.tableData.length;
                    // 平均成绩
                    that.averScore = (sumScore / that.examCount).toFixed(0);
                    // 预测成绩
                    that.predictScore = ((sumScore - minScore - that.maxScore) / (that.examCount - 2)).toFixed(0);

                    that.tableData = that.tableData
                }
            })
        },
        resumeExam() {
            this.$router.push('/MockExam')
            // if (this.types == 1) {
            //     this.$router.push('/MockExam')
            // }
            // if (this.types == 2) {
            //     this.$router.push('/MockExam')
            // }
        },
        handleEdit() { }
    },
}
</script>

<style scoped lang="scss">
.examScores {
    padding: 1.5% 12.5%;
    background-color: #fff;
}

.userExamInfo {
    display: flex;
    justify-content: space-between;
    margin: 1.5% 0;
}

.leftInfo,
.rightInfo {
    display: flex;
}

.leftInfo {

    .maxScore,
    .resume {
        margin-left: 20px;
    }

    .resume {
        cursor: pointer;
        text-align: center;
        width: 120px;
        height: 28px;
        line-height: 28px;
        background: #2AC092;
        border-radius: 18px;
        font-size: 16px;
        color: #fff;
        margin-top: 18px;
    }
}

.rightInfo {
    .item {
        margin-left: 60px;

        .score {
            font-size: 26px;

            >span {
                font-size: 18px;
            }
        }

        .title {
            margin-top: 5px;
        }
    }
}</style>